<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<script charset="utf-8" src="http://map.qq.com/api/js?v=1"></script>
<script type="text/javascript">
	var geolocation, map, marker = null;
	var init = function() {

		var center = new soso.maps.LatLng(23.133617,113.329808);
		var map = new soso.maps.Map(document.getElementById('sosoMap'), {
			center : center,
			zoomLevel : 13
		});
		geolocation = new soso.maps.Geolocation();
		geolocation.position({}, function(results, status) {
			var city = document.getElementById("Location");
			if (status == soso.maps.GeolocationStatus.OK) {
				map.setCenter(results.latLng);
				city.style.display = 'inline';
				city.innerHTML = results.name;
				if (marker != null) {
					marker.setMap(null);
				}
				marker = new soso.maps.Marker({
					map : map,
					position : results.latLng
				});
			} else {
				alert("检索没有结果，原因: " + status);
			}
		});

		soso.maps.Event.addListener(map, 'click', function(event) {
			$("#Location_click").text('[' + event.latLng.getLat() + ',' + event.latLng.getLng() + ']');
		});

		initMarker(map);
	}

	function initMarker(map){
		$.post('${ctx}/rest/mapPosition/getVicinityMapPosition', null, function(data){
			var restaurantListInfoHtml = "";
			$.each(data, function(i, o){
				if(o){
					var index = i + 1 + "";
					restaurantListInfoHtml += index + ":" + o.title + "<br/>";
					var marker = new soso.maps.Marker({
				        position: new soso.maps.LatLng(o.longitude, o.latitude),
				        map: map
				    });

				    var decor = new soso.maps.MarkerDecoration({
				        content: index,
				        margin: new soso.maps.Size(0, -4),
				        align: soso.maps.ALIGN.CENTER,
				        marker: marker
				    });
				}
			});
			$("#restaurantListInfo").html(restaurantListInfoHtml);
		});
	}
	
	$(function() {
		init();
	});
</script>
<style type="text/css">
.mapTitle {
	width: 100%;
	background: #3397e4;
	border-radius: 2px 2px 0 0;
	color: #fff;
	line-height: 38px;
	padding: 0px;
	font-size: 18px;
	font-weight: normal;
}

.mapContent {
	height: 470px;
	width: 100%;
}

#sosoMap{
	float: left;
	height: 100%;
	width: 80%
}

.restaurantList{
	float: right;
	height: 100%;
	width: 20%;
}

</style>
<script type="text/javascript">
	$(function() {

		$(".mapContent").hide();
		
		$("#map-resize-small").click(function() {
			$(".mapDiv").hide();
		});

		$("#switchingAddress").click(function(){
			$('.mapContent').toggle('normal', 'linear');
		});
	});

</script>
<div class="container containerDiv">
	<div class="mapTitle">
		您当前位置所在:<span id="Location"></span>
		<span id="switchingAddress" style="cursor: pointer;">[切换地址]</span>
		<!-- 您点击位置所在:<span id="Location_click"></span> -->
	</div>
	<div class="mapContent">
		<div id="sosoMap"></div>
		<div class="restaurantList">
			附近餐厅：
			<br/>
			<span id="restaurantListInfo">
			</span>
		</div>
	</div>
</div>
